<template>
	<div class="yellow">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>申请售后</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox" v-if="state">
			<div class="ferund" style="padding-bottom: 0;">
				<h1>{{retobj.returnType==1?'换货':'退款'}}商品</h1>
				<div class="protitle flex" style="padding: 0 0.3rem;">
					<div class="proImage"><img :src="obj.frontPicUrl"></div>
					<div class="info flex col jlr">
						<div class="top">
							<h2>{{obj.productName | textcell}}</h2>
							<h4>{{obj.colorName}} <span>{{obj.specsName}}</span></h4>
						</div>
						<h3>￥{{obj.price}}</h3>
					</div>
				</div><!--产品展示-->

				<div class="ferundItem flex a-center jlr" @click="isreturnType=true">
					<h3>售后方式</h3>
					<div class="ferundRight flex a-center">
						{{retobj.returnType==1?'换货':'退款'}} <i class="iconfont icon-arrow-right"></i>
					</div>
				</div>

				<div class="ferundItem flex a-center jlr" v-if="retobj.returnType==2" @click="isrefundTyper=true">
					<h3>退款方式</h3>
					<div class="ferundRight flex a-center">
						{{refundTypeName}} <i class="iconfont icon-arrow-right"></i>
					</div>
				</div>

				<div class="ferundItem flex a-center jlr">
					<h3>{{retobj.returnType==1?'换货':'退款'}}数量</h3>
					<van-stepper v-model="value" :min="1" :max="obj.buyNums"/>
				</div>

				<div class="ferundItem flex a-center jlr" v-if="retobj.returnType==2">
					<h3>退款金额</h3>
					<div class="ferundRight flex a-center" style="color: #fe7537;">
						￥{{retobj.returnTotalAmt}}
					</div>
				</div>

				<div class="ferundItem flex a-center jlr" v-if="retobj.returnType==2">
					<h3>退款期限</h3>
					<div class="ferundRight flex a-center">
						<span style="color: #fe7537;">1-7</span>个工作日原路退回
					</div>
				</div>

				<div class="ferundItem flex a-center jlr" @click="isafter=true">
					<h3>{{retobj.returnType==1?'换货':'退款'}}理由</h3>
					<div class="ferundRight flex a-center">
						{{afterName}} <i class="iconfont icon-arrow-right"></i>
					</div>
				</div>

				<div class="ferundItem flex a-center jlr" @click="isshiparr=true">
					<h3>退回物流/快递公司</h3>
					<div class="ferundRight flex a-center">
						{{shipName}} <i class="iconfont icon-arrow-right"></i>
					</div>
				</div>

				<div class="ferundItem flex a-center jlr">
					<h3>退回物流/快递单号</h3>
					<div class="ferundRight flex a-center">
						<input type="text" v-model="retobj.returnShipTraceNo" placeholder="请输入快递单号" style="text-align: right;">
					</div>
				</div>
			</div>

			<div class="ferund" style="margin-top: 0.2rem;">
				<h1>退款原因</h1>
				<div style="padding: 0.3rem;">
					<div class="context">
						<textarea placeholder="请输入原因(选填)" v-model="retobj.reqReturnReason"></textarea>
						<div class="imggroup">
							<div class="item" v-for="(v,i) in retobj.returnPicList" :key="i" @click="remove(i)">
								<img :src="v.picUrl">
							</div>
							<div class="item bg" v-if="retobj.returnPicList.length<4">
								<span v-if="retobj.returnPicList.length"><input type="file" accept="image/*" @change="uploadImg">{{retobj.returnPicList.length}}/4</span>
								<span v-else>
									<input type="file" accept="image/*" @change="uploadImg">
									添加图片
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="blockbtn" @click="send" style="margin-top: 0.4rem;">申请{{retobj.returnType==1?'换货':'退款'}}</div>
			</div>

		</div>

    <van-actionsheet
      v-model="isreturnType"
      :actions="returnTypeArr"
      @select="onReturnTypeSelect"
    />

    <van-actionsheet
      v-model="isafter"
      :actions="afterActions"
      @select="onAfterSelect"
    />

    <van-actionsheet
      v-model="isrefundTyper"
      :actions="refundTypearr"
      @select="onRefundTypSelect"
    />

    <van-actionsheet
      v-model="isshiparr"
      :actions="shipActions"
      @select="onShipSelect"
    />

	</div>
</template>
<script>
export default {
	data(){
		return {
			state:false,
			value:1,
			isreturnType:false,
			isrefundTyper:false,
			isafter:false,
			isshiparr:false,

			obj:{},
			retobj:{
				orderId: this.$route.query.orderId,
        orderItemId: this.$route.query.orderItemId,
				productId: null,
				returnTotalAmt:0,
				returnNums:1,
				returnType:1,//1 换货  2  退款
				returnShipCompanyId:'',//快递公司编号
				returnShipTraceNo:'',//快递单号
				returnReasonType: null,//退货原因
				refundType: null,//退款方式  1退款退货 2仅退款
				reqReturnReason:'',//退款理由
				returnPicList:[]
			},
      returnTypeArr: [{code:1,name:'换货'},{code:2,name:'退款'}],
      returnTypeName: '',
      refundTypearr: [{code:1,name:'退款退货'},{code:2,name:'仅退款'}],
      refundTypeName: '',
      shipActions:[],
      shipName: '',
      afterActions:[],
      afterName: ''
		}
	},
	activated() {
		this.init()
	},
	filters:{
		refundType(v){
			if(v==1){
				return '退款退货'
			}else{
				return '仅退款'
			}
		},
		thyy(v,arr){
			return arr[v-1]
		},
		shipList(v,arr){
			if(arr.find(el=>el.shipId==v)){
				return arr.find(el=>el.shipId==v).shipName
			}else{
				return '请选择'
			}

		}
	},
	methods:{
		back(){
			this.$router.back(-1)
		},
		init(){
			this.$ajax.returnOrderInfo({orderItemId:this.$route.query.orderItemId}).then(res=>{
				if(res.code==0){
					console.log('申请退款接口',res)
					this.state = true
					this.obj = res.data
          this.initShipActions(res.data.shipList);
          this.initAfterActions(res.data.afterSaleTypeName);
					this.retobj.returnTotalAmt = res.data.price;
          this.retobj.productId = res.data.productId;
          this.retobj.colorId = res.data.colorId;
          this.retobj.specsId = res.data.specsId;
				}
			})
		},
    initShipActions(shipList){
      const that = this;
      shipList.forEach(function(item, index, array) {
        const obj = {
          code: item.shipId,
          name: item.shipName
        };
        that.shipActions.push(obj);
      });
    },
    initAfterActions(afterSaleTypeName){
      const that = this;
      let obj = [
        {code: 1,name: afterSaleTypeName},
        {code: 2,name: '商品质量问题'},
        {code: 0,name: '其它'}
      ];
      that.afterActions = obj;
    },
		remove(index){
			this.retobj.returnPicList.splice(index,1)
		},
    onReturnTypeSelect(item){
			this.retobj.returnType = item.code;
      this.returnTypeName = item.name;
			this.isreturnType = false
		},
    onAfterSelect(item){
			this.retobj.returnReasonType = item.code;
      this.afterName = item.name;
			this.isafter = false
		},
    onRefundTypSelect(item){
			this.retobj.refundType = item.code;
			this.refundTypeName = item.name;
			this.isrefundTyper = false
		},
    onShipSelect(item){
      this.retobj.returnShipCompanyId = item.code;
      this.shipName = item.name;
			this.isshiparr = false
		},
		uploadImg(e){
			var that = this
			this.$fn.uploadImg(e).then(res=>{
				that.$ajax.uploadImg({base64Str:res.img,imgType:'.jpg'}).then(res=>{
					that.retobj.returnPicList.push({picUrl:res.data.imgUrl})
				})
			})
		},
		send(){
      console.log('send',{...this.retobj});

      if(this.retobj.returnType == 1){
          if(!this.retobj.returnReasonType){
            this.$toast("请选择换货理由");
            return false;
          }

          if(!this.retobj.returnShipCompanyId){
            this.$toast("请选择物流/快递公司");
            return false;
          }

          if(!this.retobj.returnShipTraceNo){
            this.$toast("请输入退回物流/快递单号");
            return false;
          }

      }else{
        if(!this.retobj.refundType){
          this.$toast("请选择退款方式");
          return false;
        }

        if(!this.retobj.returnReasonType){
          this.$toast("请选择换货理由");
          return false;
        }

        if(this.retobj.refundType == 1){
          if(!this.retobj.returnShipCompanyId){
            this.$toast("请选择物流/快递公司");
            return false;
          }

          if(!this.retobj.returnShipTraceNo){
            this.$toast("请输入退回物流/快递单号");
            return false;
          }
        }

      }

			this.$ajax.insertReturn({...this.retobj}).then(res=>{
				if(res.code==0){
					this.$toast.success('申请成功')
					this.$router.replace('/ordershow?id='+this.$route.query.orderId+'&productId='+this.$route.query.productId)
				}
			})
		}
	},
	watch:{
		value(v){
			this.retobj.returnNums = v
			this.retobj.returnTotalAmt = v*this.obj.price
		}
	}
}
</script>
